<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core';
import { getDefaultLabel } from '@/utils/flow';
defineProps<{
  type: string;
}>();
</script>

<template>
  <div class="node-content">
    <div class="icon-container">
      <Handle type="target" :position="Position.Left" class="custom-handle left-handle" />
      <SvgIcon :local-icon="`flow-${type}`" class="node-shape" />
      <Handle type="source" :position="Position.Right" class="custom-handle right-handle" />
    </div>
    <span class="node-label">{{ getDefaultLabel(type) }}</span>
  </div>
</template>

<style>
.vue-flow__node {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.node-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
}

.icon-container {
  position: relative;
  display: inline-block;
}

.node-shape {
  width: 40px;
  height: 40px;
}

.custom-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white !important;
  border: 1px solid #555;
  border-radius: 50%;
  top: 50%; /* 关键：垂直居中 */
  transform: translateY(-50%); /* 关键：调整垂直位置 */
  z-index: 10;
}

.left-handle {
  left: -2px;
}

.right-handle {
  right: -2px;
}

.custom-handle:hover {
  border-color: #007bff;
}

.node-label {
  margin-top: 4px;
  font-size: 12px;
}
</style>
